<template>
  <div class="AlertProp">
    <div class="wapper">
      <h4 class="alertTitle">
        {{fromText}}成功
        <i class="iconfont">&#xe625;</i>
      </h4>
      <p class="alertContent">{{count}}秒后跳转至{{toText}}页</p>
      <p class="alertContent">如未跳转，请点击
        <router-link :to="{path:toRoute,query:{data:toQuery }}">这里</router-link>
        跳转至{{toText}}页
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AlertProp',
  props: {
    fromText: String,
    toText: String,
    toRoute: String,
    toQuery: String
  },
  data () {
    return {
      count: 5,
      timer: null
    }
  },
  mounted () {
    const _this = this;
    this.timer = setInterval(function(){
      if(_this.count > 0){
        _this.count--;
      }
    },1000)  
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .AlertProp
    position: absolute
    top: $headerHeight
    width: 100%
    height: 100%
    z-index: $pop-index
    .wapper
      position: relative
      width: 7rem
      height: 2.6rem
      top: 50%
      margin-top: -2.65rem
      left: 50%
      margin-left: -4rem
      background: $bgcolor-white
      border: .02rem solid $borderColor
      border-radius: .1rem
      color: $font-black
      padding: .26rem .24rem
      .alertTitle
        font-size: .34rem
        color: $font-welcome
        line-height: .8rem
        border-bottom: .01rem solid #dfdfdf
        text-align: center
        .iconfont
          color: #52bb17
      .alertContent
        color: $font-welcome
        margin-top: .4rem
        a 
          color: 
</style>
